import React from 'react';
import { RouteLayout, ListPage, Form, ListViewPage } from 'weaver-mobile-page';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Icon, List, SearchBar, Tools, Result, ActivityIndicator } from 'weaver-mobile';
import SearchPage from './SearchPage';

const ButtonGroup = RouteLayout.ButtonGroup;
const template = {
    default: [
        {
            key: 'col1',
            configs: [
                {
                    key: 'col1_row1',
                    configs: [
                        {
                            key: 'name',
                            style: { fontWeight: "normal" }
                        },
                    ],
                },
                {
                    key: 'col1_row2',
                    configs: [
                        {
                            key: 'dataSpan',
                            className: "color-gray"
                        },
                        {
                            key: 'workflowrangespan',
                            className: "color-gray"
                        },
                    ],
                },
                {
                    key: 'col1_row3',
                    configs: [
                        {
                            key: 'uidSpan',
                            className: "color-gray"
                        },
                        {
                            key: 'agenteridspan',
                            className: "color-gray"
                        },
                    ],
                },
            ],
        },
    ],
};
const getLabel = Tools.getLabel;

@inject("wfAgentStore")
@inject("wfSearchPageStore")
@observer
export default class ImportFromTem extends React.Component {
    componentWillMount() {
        const { location = {} } = this.props;
        const { pathname = "" } = location;
        const { agentTemplate, importFromTem, getPageTitle, setMobxStore, setInitDatas, agentTemplateCondition } = this.props.wfAgentStore;
        const { isAdvancedSearching } = importFromTem;
        setMobxStore({
            searchPage_layout: new RouteLayout.Store({ route: "/agent/importFromTem", id: "searchPage" }),
            layout: new RouteLayout.Store({ route: "/agent/importFromTem", id: "advanceSearch" }),
            searchValue: "",
        })
        setInitDatas({ nowPath: pathname })
        if (!isAdvancedSearching) {
            agentTemplate();
        }
        agentTemplateCondition();
        getPageTitle(pathname);
    }
    
    componentWillUpdate() {
        const { location, wfAgentStore } = this.props;
        const { getPageTitle } = wfAgentStore;
        const { pathname = "" } = location;
        getPageTitle(pathname);
    }

    componentWillUnount() {
        const { resetImportFromTem } = this.props.wfAgentStore;
        resetImportFromTem();
    }

    getGroupButton = () => {
        const { importFromTem } = this.props.wfAgentStore;
        const { selectedRowKeys } = importFromTem;
        return (
            <div className='wf-agent-importFromTemp-button-group' >
                <ButtonGroup
                    data={[
                        {
                            key: 'selectAll',
                            text: getLabel(826, '确定'),
                            disabled: selectedRowKeys !== "" ? false : true,
                            onClick: () => {
                                const { importFromTem, setAddAgent, getAddAgentInfo } = this.props.wfAgentStore;
                                const { listViewPage_listsotre } = importFromTem;
                                const { selectedRowKeys } = listViewPage_listsotre;
                                if (selectedRowKeys.length > 0) {
                                    this.props.history.push("/agent/addAgent")
                                    setAddAgent({ symbol: "importTemplate", templateid: toJS(selectedRowKeys), isInAddAgent: true })
                                    getAddAgentInfo({ symbol: "importTemplate", templateid: toJS(selectedRowKeys) });
                                }
                            },
                            className: selectedRowKeys.length !== 0 ? "selectAll-active" : "selectAll"
                        },
                    ]}
                />
            </div>
        )
    }

    onSelectAgent = (selectedRowKeys) => {
        const { importFromTem, setImportFromTemData } = this.props.wfAgentStore;
        // const { selectedRowKeys } = importFromTem;
        // if (item.id === toJS(selectedRowKeys)) {
        //     setImportFromTemData({ selectedRowKeys: "" })
        // } else {
        //     setImportFromTemData({ selectedRowKeys: item.id })
        // }
        setImportFromTemData({ selectedRowKeys: selectedRowKeys })
    }

    getListDom_back = () => {
        const { importFromTem } = this.props.wfAgentStore;
        const { datas, selectedRowKeys } = importFromTem;
        let newDatas = toJS(datas);
        const items = [];
        if (newDatas.length > 0) {
            newDatas.map(item => {
                items.push(<ListPage.Item
                    key={item.id}
                    data={item}
                    showCheck={true}
                    checked={toJS(selectedRowKeys).includes(item.id)}
                    template={template}
                    onSelect={() => {
                        this.onSelectAgent(item)
                    }}
                    onClick={() => {
                        this.onSelectAgent(item)
                    }}
                >
                </ListPage.Item>)
                return items;
            })
        }

        if (items.length > 0) {
            return <div className="wf-agent-agentList">
                <List > {items} </List>
            </div>;
        } else {
            return (
                <div className="wf-agent-NoData">
                    <Result
                        img={<Icon type="no-data" size="lg" />}
                        message={getLabel(83553, "暂无数据")}
                    />
                </div>
            )
        }
    }

    getNodata = () => {
        return (
            <div className="wf-agent-NoData">
                <Result
                    img={<Icon type="no-data" size="lg" />}
                    message={getLabel(83553, "暂无数据")}
                />
            </div>
        )
    }

    getTemplate = (template) => {
        const newTemp = {
            default: [{
                ...template,
                key: 'col_1',
                render: (data) => {
                    const { name, workflowrangespan, agenteridspan } = data;
                    return (
                        <div>
                            <div style={{ display: "flex" }}>
                                <div style={{ flex: "10", wordBreak: "break-all", color: "#333333" }}>
                                    {name}
                                </div>
                            </div>
                            <div style={{ color: "#999999" }}>
                                {getLabel(391149,"代理路径")}：{workflowrangespan}
                            </div>
                            <div style={{ color: "#999999" }}>
                                {getLabel(17566,"代理人")}：{agenteridspan}
                            </div>
                        </div>
                    );
                },
            }],
        };
        return newTemp;
    }

    getRowProps = (rowData) => {
        return {
            showCheck: true,
        }
    }

    getListDom = () => {
        const { wfAgentStore } = this.props;
        const { importFromTem } = wfAgentStore;
        const { listViewPage_listsotre, isShowCheck } = importFromTem;
        if (listViewPage_listsotre.data.length>0) {
            return (
                <ListViewPage.Normal
                    className="wf-importFromTem-list-view-page"
                    // showCheck={true}
                    haveCheck={true}
                    multipleCheck={false}
                    showCheck={isShowCheck}
                    rowKey="randomFieldId"
                    store={listViewPage_listsotre}
                    getTemplate={this.getTemplate}
                    getRowProps={this.getRowProps}
                    onRowSelect={selectedRowKeys => {
                        this.onSelectAgent(selectedRowKeys)
                    }}
                // onRowClick={(data)=>console.log("data",data)}
                />
            );
        } else {
            this.getNodata();
        }
       
    }
    render() {
        const { wfAgentStore } = this.props;
        const { setAdvancedItem, initDatas, advancedItem, layout, searchPage_layout, searchValue, importFromTem } = wfAgentStore;
        const { isShowLoading, searchParams } = importFromTem;
        const { isAdVancedHasData, nowPath } = initDatas;
        return (
            <div className="templateManagement">
                <div>
                    <SearchBar
                        className="search-select"
                        placeholder={getLabel(18510, "请输入模板名称")}
                        showExtraButton
                        value={searchValue}
                        extraButton={[
                            // { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
                            { key: 'advanced', show: <Icon key={isAdVancedHasData ? "filter-o-hot" : "filter-o"} type={isAdVancedHasData ? "filter-o-hot" : "filter-o"} className={isAdVancedHasData && "color-blue"} /> },
                        ]}
                        onExtraButtonClick={(key) => {
                            if (key === "advanced") {
                                let newForm = new Form.Store()
                                newForm.initForm(advancedItem.conditioninfo, nowPath + '/advanceSearch');
                                let newSearchParams = toJS(searchParams)
                                if (newSearchParams.workflowid) {
                                    newSearchParams.workflowid = { value: [{ id: newSearchParams.workflowid, name: newSearchParams.workflowidspan }] }
                                } else {
                                    newSearchParams.workflowid = { value: [] }
                                }
                                if (newSearchParams.agenterid) {
                                    newSearchParams.agenterid = { value: [{ id: newSearchParams.agenterid, name: newSearchParams.agenteridspan }] }
                                } else {
                                    newSearchParams.agenterid = { value: [] }
                                }
                                newForm.updateFields({ ...newSearchParams, name: { value: searchValue } });
                                setAdvancedItem({ form: newForm, parentPath: "importFromTem" });
                                this.props.history.push(layout.path)
                            }
                        }}
                        onFocus={() => {
                            const { setState } = this.props.wfSearchPageStore
                            const { searchValue } = this.props.wfAgentStore;
                            setState({ placeholder: getLabel(197,"搜索"), ssName: "importFromTem", searchValue: searchValue })
                            this.props.history.push(searchPage_layout.path)
                        }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    {this.getListDom()}
                    {isShowLoading && <ActivityIndicator
                        toast
                        text={getLabel(500408 , "加载中...")}
                        animating={isShowLoading}
                    />}
                    {this.getGroupButton()}
                </div>
            </div>
        );
    }
}

